<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
    <title>dynatree - temporary tests</title>

    <script src="../jquery/jquery.js" type="text/javascript"></script>
    <script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
    <script src="../jquery/jquery.cookie.js" type="text/javascript"></script>

    <link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css">
    <script src="../src/jquery.dynatree.js" type="text/javascript"></script>

    <!-- Add code to initialize the tree when the document is loaded: -->
    <script type='text/javascript'>
    /* <![CDATA[ */

	$(function(){
		$("#tree").dynatree({
			rootVisible: true,
			rootCollapsible: false,
			keyboard: true,
			persist: true,
			children: [
				{title: "Node 1", expand: true, key: "_1",
				 children: [
					{title: "Node 1.1" }, 
					{title: "Node 1.2", isFolder: true, expand: true, key: "_12",
						 children: [
									{title: "Node 1.2.1" }, 
									{title: "Node 1.2.2", key: "_122",
										 children: [
													{title: "Node 1.2.2.1" }, 
													{title: "Node 1.2.2.2" }, 
													{title: "Node 1.2.2.3" }
													] 
										 }, 
									{title: "Node 1.2.3",
										children: [] 
									}
									] 
						 }, 
					{title: "Node 1.3" }
					] 
					},
				{title: "Node 2" } 
			],
			onSelect: function(dtnode) {
				$("#echoSelected").text(dtnode.data.title);
				//alert("You selected " + dtnode.data.title);
			},
			onLazyRead: function(dtnode) {
				logMsg("Benchmarking mode='" + dtnode.data.mode + "' done.");
			}
		});
		$("#tree2").dynatree({
			onSelect: function(dtnode) {
				$("#echoSelected").text(dtnode.data.title);
				//alert("You selected " + dtnode.data.title);
			}
		});
		$("#btnRemoveDiv").click(function(){
			logMsg("removing %o", $("#tree"));
			$("#tree").remove();
		});
		$("#btn50").click(function(){
			$("#tree").dynatree("getRoot").append({title: 'i50', expand: true});
		});

	});

    /* ]]> */
    </script>
</head>
<body>
	<p>This file is only temporarily used to reproduce issues.</p>
	<p style="color: red;">Using doctype XHTML 1.0 Strict.</p>
	<div id='tree'> </div>

	<div>Selected node: <span id="echoSelected">-</span></div>
	<div>Focused node: <span id="echoFocused">-</span></div>
    <p>
        <button id="btnRemoveDiv">Remove main div</button>
        <button id="btn50">issue #50</button>
        <button id="btnDiv">dynamic div issue</button>
    </p>
	<div id='tree2'>
	<ul>
	<li data="{title: 'node1'}">node1</li>
	<li data="{title: 'node2'}">node2</li>
	</ul> 
	</div>


	<p><a href="http://dynatree.googlecode.com">jquery.dynatree.js</a></p>
</body>
</html>
